<template>
  <div class="weather-box" v-if="weatherData !== null"></div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      weatherData: null,
      weatherIcon: ''
    }
  },
  created() {},

  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.weather-box {
  position: absolute;
  height: 60px;
  top: 25px;
  right: 50px;

  & > i {
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: middle;
  }

  & > span:first-of-type {
    display: inline-block;
    line-height: 60px;
    font-size: 38px;
    color: #ffffff;
    vertical-align: middle;
    margin-left: 20px;

    & > b {
      margin-left: 20px;
    }
  }

  & > span:nth-of-type(2) {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 60px;
    font-size: 38px;
    color: #96cffa;
    margin-left: 60px;

    &::before {
      position: absolute;
      width: 1px;
      height: 36px;
      content: '';
      left: -30px;
      top: 14px;
      background-color: #96cffa;
    }
  }
}
</style>
